<template>
  <div class="p-8">
    <el-card class="rounded-3xl shadow-md mb-8">
      <template #header>
        <div class="card-header">
          <span>添加课程</span>
        </div>
      </template>
      <div class="flex gap-4 mb-4">
        <div class="flex flex-col gap-2 w-1/2">
          <label class="flex-none">课程ID</label>
          <el-input-number
            class="h-12 w-full"
            v-model="addCourseFormData.courseId"
            placeholder="请输入"
            clearable
          />
        </div>
        <div class="flex flex-col gap-2 w-1/2">
          <label class="flex-none">课程名称</label>
          <el-input
            class="h-12"
            v-model="addCourseFormData.courseName"
            placeholder="请输入"
            clearable
          />
        </div>
      </div>
      <div class="flex gap-4 mb-4">
        <div class="flex flex-col gap-2 w-1/2">
          <label class="flex-none">任课教师</label>
          <el-input
            class="h-12"
            v-model="addCourseFormData.teacher"
            placeholder="请输入"
            clearable
          />
        </div>
        <div class="flex flex-col gap-2 w-1/2">
          <label class="flex-none">容量</label>
          <el-input-number
            class="h-12 w-full"
            v-model="addCourseFormData.all"
            placeholder="请输入"
            clearable
          />
        </div>
      </div>
      <template #footer>
        <div class="card-footer flex justify-end">
          <el-button type="primary" size="large" @click="addCourse"
            >添加课程</el-button
          >
        </div>
      </template>
    </el-card>
    <el-card class="rounded-3xl shadow-md">
      <template #header>
        <div class="card-header">
          <span>课程列表</span>
        </div>
      </template>
      <el-table v-loading="loading" ref="multipleTableRef" :data="tableData" style="width: 100%">
        <el-table-column property="courseId" label="课程ID" width="120" />
        <el-table-column property="courseName" label="课程名称" />
        <el-table-column property="teacher" label="任课教师" />
        <el-table-column property="all" label="容量" />
        <el-table-column property="now" label="已选人数" />
        <el-table-column label="是否已满">
          <template #default="scope">
            <div>
              <span
                class="text-green-600 bg-green-100 dark:bg-green-900 dark:text-green-300 px-2 py-1 rounded-md"
                v-if="scope.row.now <= scope.row.all"
                >否</span
              >
              <span
                class="text-red-600 bg-red-100 dark:bg-red-900 dark:text-red-300 px-2 py-1 rounded-md"
                v-else
                >是</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <div>
              <el-button type="primary" link @click="editCourse(scope.row)"
                >修改</el-button
              >
              <el-button type="danger" link @click="deleteCourse(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="flex justify-between items-center">
          <p class="text-sm text-gray-400">
            共 {{ total }} 条记录 第 {{ currentPage }} / {{ totalPage }} 页
          </p>
          <div class="flex items-center gap-4">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :background="true"
              layout="prev, pager, next"
              :total="total"
              @current-change="handleCurrentChange"
            />
            <el-select
              class="w-32"
              v-model="pageSize"
              @change="handleSizeChange"
            >
              <el-option
                v-for="option in pageSizeOptions"
                :value="option"
                :key="option"
                :label="`${option}条/页`"
              >
                {{ option }}条/页
              </el-option>
            </el-select>
            <div class="flex items-center gap-2">
              <p class="text-sm text-gray-400">跳至</p>
              <el-input-number
                :min="1"
                :max="totalPage"
                @change="handleCurrentChange"
                :controls="false"
                class="w-16"
              />
              <p class="text-sm text-gray-400">页</p>
            </div>
          </div>
        </div>
      </template>
    </el-card>
    <SelectDrawer
      v-model:drawer="isDrawerOpen"
      :itemData="drawerItemData"
      :type="drawerType"
      @refresh-list="getShowInfo"
    />
  </div>
</template>
<script setup>
import { ApiCourse } from "@/core/api/index.js";
import { computed, onMounted, ref } from "vue";
import SelectDrawer from "./SelectDrawer.vue";

const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(10);
const totalPage = computed(() => Math.ceil(total.value / pageSize.value));
const pageSizeOptions = [10, 20, 50, 100];
const tableData = ref([]);

const isDrawerOpen = ref(false);
const drawerItemData = ref({});
const drawerType = ref("edit");

const addCourseFormData = ref({
  courseId: 0,
  courseName: "",
  teacher: "",
  all: 0,
  now: 0,
});

const getShowInfo = async () => {
  loading.value = true;
  const response = await ApiCourse.getCourseList({
    page: currentPage.value,
    size: pageSize.value,
  });
  if (response.code == 0) {
    tableData.value.splice(0, tableData.value.length, ...response.data.list);
    total.value = response.data.total ? response.data.total : 10;
  }
  loading.value = false;
};

const toggleDrawer = () => {
  isDrawerOpen.value = !isDrawerOpen.value;
};

const handleSizeChange = (size) => {
  pageSize.value = size;
  getShowInfo();
};
const handleCurrentChange = (page) => {
  currentPage.value = page;
  getShowInfo();
};
const editCourse = (row) => {
  drawerItemData.value = row;
  drawerType.value = "edit";
  toggleDrawer();
};
const deleteCourse = (row) => {
  drawerItemData.value = row;
  drawerType.value = "delete";
  toggleDrawer();
};

const addCourse = () => {
  drawerItemData.value = {
    courseid: addCourseFormData.value.courseId,
    coursename: addCourseFormData.value.courseName,
    teacher: addCourseFormData.value.teacher,
    all: addCourseFormData.value.all,
    now: addCourseFormData.value.now,
  };
  drawerType.value = "add";
  toggleDrawer();
};

onMounted(() => {
  getShowInfo();
});
</script>
